<template>
	<div class="header">
		<div class="header-left">
			中部地区
			<van-icon name="arrow" />
		</div>
		<van-search v-model="value" shape="round" placeholder="找医院" />
	</div>
	<!-- 轮播 -->
	<van-swipe class="my-swipe" :autoplay="3000" height="170" indicator-color="white">
		<van-swipe-item v-for="item in homeData.slides" :key="item.id">
			<van-image radius="10" :src="item.pic_url" />
		</van-swipe-item>
	</van-swipe>
	<van-row justify="space-around">
		<van-col class="center-img" v-for="item in homeData.nav2s" :key="item.id" @click="goOrder(index)">
			<van-image width="190" radius="10" :src="item.pic_url" />
		</van-col>
	</van-row>
	<!-- 列表 -->
	<van-row class="yy-list" justify="space-around" v-for="(item,index) in homeData.hospitals" @click="goOrder(index)">
		<van-col span="6">
			<!-- image -->
			<van-image width="100" height="90" radius="10" :src="item.avatarUrl" />
		</van-col>
		<van-col class="yy" span="15" >
			<div class="yy-name">{{item.name}}</div>
			<div class="yy-type">
				<span>{{item.rank}}</span>
				&nbsp;
				<span>{{item.label}}</span>
			</div>

			<div class="yy-text">{{item.intro}}</div>
		</van-col>
	</van-row>
</template>

<script setup>
	import {ref, reactive, onMounted, getCurrentInstance} from 'vue'
	import { useRouter, useRoute} from 'vue-router'
	// 获取当前vue实例
	const {
		proxy
	} = getCurrentInstance();
	const searchValue = ref('')

	// 首页数据
	const homeData = reactive({
		hospitals: [],
		nav2s: [],
		navs: [],
		now: [],
		slides: []
	});

	const router = useRouter()

	onMounted(async () => {
		const {
			data
		} = await proxy.$api.index();
		Object.assign(homeData, data.data);
		console.log('首页数据 ', homeData);
	});

	// 快捷入口 跳转到下单页面
	const goOrder = (index) => {
		console.log('goOrder'+index);
		// 跳转到下单页面
		router.push(`/createOrder?id=${homeData.hospitals[index].id}`);

	}
</script>

<style lang="less" scoped>
	.header {
		display: flex;
		justify-content: space-between;
		margin: 5px;
		line-height: 54px;

		.header-left {
			padding-left: 22px;
			background: url() no-repeat left center;
			background-size: 20px;
			font-size: 20px;
			font-weight: bold;
			color: #666666;
		}
	}


	.my-swipe {
		margin: 5px;
		//background-color: #39a9ed;
	}

	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		line-height: 150px;
		text-align: center;
		//background-color: #39a9ed;
	}

	.yy-list {
		padding-bottom: 10px;
		margin: 20px 0;
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04), 0 1px 6px 0 rgba(0, 0, 0, 0.04);

		.yy {
			.yy-name {
				font-size: 20px;
				line-height: 30px;
				font-weight: bold;
			}

			.yy-type {
				font-weight: bold;
				line-height: 25px;
				font-size: 15px;
				color: #0ca7ae;
			}

			.yy-text {
				font-size: 14px;
				color: #999999;
			}
		}
	}

	.bottom-text {
		line-height: 50px;
		text-align: center;
		color: #999999;
	}
</style>
